<template>
  <div class="template-wrap">
    <template>
      <el-button @click="addTenplateType = true" type="primary">添加模板</el-button>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column
        prop="date"
        label="中文名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="英文名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="标识"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope" >
          <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
          <el-button type="text" size="small" @click="addTenplateType= true;" >修改</el-button>
          <el-button type="text" size="small">删除</el-button>
          
        </template>
      </el-table-column>
    </el-table>

  <el-dialog
  title="添加新模板"
  :visible.sync="addTenplateType"
  width="50%">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="中文名称">
      <el-input v-model="chineseName"></el-input>
    </el-form-item>
    <el-form-item label="英文名称">
      <el-input v-model="englishName"></el-input>
    </el-form-item>
    <el-form-item label="标识">
      <el-input v-model="mark"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="remark"></el-input>
    </el-form-item>
    <el-form-item label="模板内容">
      <vue-ueditor-wrap v-model="form.msg" :config="myConfig"></vue-ueditor-wrap>
    </el-form-item>
     
    <el-form-item style="margin: 10px 0">
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

</template>

  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  name: 'Template',
  data(){
    return {
      addTenplateType: false,
      form:{
        chineseName:'',
        englishName:'',
        mark:'',
        remark:'',
        msg: '这里输入html 模板内容'
      },
      myConfig:{
         UEDITOR_HOME_URL: "/UEditor/",
          // 初始容器高度
          initialFrameHeight: 240,
          // 初始容器宽度
          initialFrameWidth: 'auto',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: 'http://35.201.165.105:8000/controller.php',
      },
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
  },
  components:{
    VueUeditorWrap
  }
}
</script>
<style lang="scss" scoped></style>
